{{define "chapter04/bind_json.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>
    bind_json页面 <br>
    <form>
        姓名：<input type="text" id="name" placeholder="请输入姓名"> <br>
        年龄：<input type="text" id="age" placeholder="请输入年龄"> <br>
        地址：<input type="text" id="addr" placeholder="请输入地址"> <br>
        <input type="button" value="提交" id="btn_add">
    </form>
    <script>
        var btn_add = document.getElementById("btn_add")
        btn_add.onclick = function(ev) {
            var name = document.getElementById("name").value
            var age = document.getElementById("age").value
            var addr = document.getElementById("addr").value

            $.ajax({
                url: "/do_bind_json",
                type: "POST",
                data: JSON.stringify({
                    "name": name,
                    "age": Number(age),
                    "addr": addr
                }),
                // 设置这两参数，显示提交的是json
                contentType:"application/json",
                dataType: "json",

                success:function(data) {
                    alert(data["code"])
                    alert(data["msg"])
                },
                fail:function(data) {
                    alert("服务器发生错误")
                }
            })
        }
    </script>
</body>
</html>
{{end}}